/**
 * 空间别名设置
 */

import React from 'react';
import { Form, Input, Field, Button } from '@teamix/ui';
import AliasNameDialog from './aliasNameDialog';
import intl from '../../../../../../../../../locale';

export default class AliasNameSetting extends React.Component {
  static propTypes = {};

  constructor(props) {
    super(props);
    this.field = new Field(this);
  }

  pathValidator = (rule, value, callback) => {
    if (/^[a-z0-9_][a-z0-9_-]{0,}$/.test(value)) {
      callback();
    } else {
      callback(
        intl.get({
          id: 'code-assets.customize.containers.aliasNameSetting.ItCanOnlyContainLowercase',
          defaultMessage: '只能包含小写字母、数字、"_"、"-"，且仅可以小写字母、数字、"_"开头',
        }),
      );
    }
  };

  render() {
    const { orgAliasName } = this.props;
    const isAliasNameVisible = orgAliasName.path === orgAliasName.organization_id;
    const isDialogBtnDisable = !this.field.getValue('path') || this.field.getError('path');
    return (
      <React.Fragment>
        <div className="alias_name">
          <div className="alias_name-title">
            {intl.get({
              id: 'code-assets.customize.containers.aliasNameSetting.EnterpriseIdentificationName',
              defaultMessage: '企业标识名',
            })}
          </div>
          <span className="alias_name-desc">
            {intl.get({
              id: 'code-assets.customize.containers.aliasNameSetting.YouCanEasilyAccessThe',
              defaultMessage: '设置后可便捷访问代码库，设定后不可更改',
            })}
          </span>
        </div>

        <React.Fragment>
          <Form field={this.field} className="alias-form">
            {isAliasNameVisible ? (
              <Form.Item
                validator={this.pathValidator}
                help={
                  this.field.getState('path') === 'error'
                    ? this.field.getError('path')
                    : intl.get({
                        id: 'code-assets.customize.containers.aliasNameSetting.ItCanOnlyContainLowercase',
                        defaultMessage:
                          '只能包含小写字母、数字、"_"、"-"，且仅可以小写字母、数字、"_"开头',
                      })
                }
              >
                <Input
                  size="small"
                  name="path"
                  style={{ width: 400, marginRight: 20 }}
                  maxLength={20}
                  hasLimitHint
                />
                <AliasNameDialog
                  path={this.field.getValue('path')}
                  trigger={
                    <Button type="primary" disabled={!!isDialogBtnDisable}>
                      {intl.get({
                        id: 'code-assets.customize.containers.aliasNameSetting.Save',
                        defaultMessage: '保存',
                      })}
                    </Button>
                  }
                />
              </Form.Item>
            ) : (
              <Form.Item>
                <Input
                  size="small"
                  name="path"
                  disabled
                  value={orgAliasName.path}
                  style={{ width: 400 }}
                />
              </Form.Item>
            )}
          </Form>
        </React.Fragment>
      </React.Fragment>
    );
  }
}
